<template>
  <div class="condition-display">
    <!-- 标题1 -->
    <div class="record-item PhotoCapture">
      <div class="title">1、门楣照片拍摄</div>
      <div class="content">
        <div class="describe">
          {{ data_PhotoCapture.describe }}
        </div>
        <div class="image-container" v-if="imgList_PhotoCapture && imgList_PhotoCapture.length > 0">
          <img class="image"
            v-for="(imgData, index) in imgList_PhotoCapture" 
            :key="index"
            :src="getImageUrl(imgData)"
            :alt="'门楣照片 ' + (index + 1)"
            @error="handleImageError"
          />
        </div>
        <div v-else class="no-image">暂无门楣照片</div>
      </div>
    </div>

    <!-- 标题2 -->
    <div class="record-item Signature">
      <div class="title">2、知情同意书签署，电子签名（近期微信确认同意屏幕截图、必要时手持身份证+签署同意的书面知情同意书相片；远期电子签名）+ 远期区块链存证</div>
      <div class="content">
        <div class="describe">
          {{ data_Signature.describe }}
        </div>
        <div class="image-container" v-if="imgList_Signature && imgList_Signature.length > 0">
          <img class="image"
            v-for="(imgData, index) in imgList_Signature" 
            :key="index"
            :src="getImageUrl(imgData)"
            :alt="'签名照片 ' + (index + 1)"
            @error="handleImageError"
          />
        </div>
        <div v-else class="no-image">暂无签名照片</div>
      </div>
    </div>

    <!-- 更多标题项可以根据需要添加 -->
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';

/* 使用安好医护端接口请求头 */
const url_head = 'https://anfine.huasun-healthcare.com:80/api_anhao'; //线上
// const url_head = 'http://127.0.0.1:8085/jeecg-boot'; //本机

// 定义props
const props = defineProps({
  orderId: {
    type: String,
    default: ''
  }
});

const data_PhotoCapture = ref({} as any);
const data_Signature = ref({} as any);

const imgList_PhotoCapture = ref<any[]>([]);
const imgList_Signature = ref<any[]>([]);

// 获取图片URL的函数，处理不同的数据结构
const getImageUrl = (imgData: any) => {
  console.log('imgData:', imgData);
  if (!imgData) return '';
  
  // 如果imgData本身就是URL字符串
  if (typeof imgData === 'string') {
    return imgData.startsWith('http') ? imgData : url_head + imgData;
  }
  
  // 如果imgData是对象，尝试获取url属性
  if (imgData.url) {
    return imgData.url.startsWith('http') ? imgData.url : url_head + imgData.url;
  }
  
  // 如果imgData有其他可能的图片路径属性
  if (imgData.path) {
    return imgData.path.startsWith('http') ? imgData.path : url_head + imgData.path;
  }
  
  // 如果都没有，返回空
  return '';
};

// 图片加载错误处理
const handleImageError = (event: any) => {
  console.error('图片加载失败:', event);
  event.target.style.display = 'none';
};

// 可以在这里定义一些内部逻辑，例如根据selectedOption动态加载数据等
const loadData = async () => {
  console.log('props', props);
  try {
    //1、...
    const photoCaptureData = await defHttp.get({
      url: url_head + '/registOrder/selectRgstLintelByOrderId?orderId=' + props.orderId,
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    data_PhotoCapture.value = photoCaptureData || {};
    
    const photoCaptureImages = await defHttp.get({
      url: url_head + '/registOrder/selectRgstPhotosByOrderIdAndType?orderId=' 
                      + props.orderId + '&type=1',
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    imgList_PhotoCapture.value = Array.isArray(photoCaptureImages) ? photoCaptureImages : [];
    console.log('data_PhotoCapture', data_PhotoCapture.value);
    console.log('imgList_PhotoCapture', imgList_PhotoCapture.value);

    //2、...
    const signatureData = await defHttp.get({
      url: url_head + '/registOrder/selectRgstSignatureIcByOrderId?orderId=' + props.orderId,
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    data_Signature.value = signatureData || {};
    
    const signatureImages = await defHttp.get({
      url: url_head + '/registOrder/selectRgstPhotosByOrderIdAndType?orderId=' 
                      + props.orderId + '&type=2',
      method: 'GET',
      headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
      },
    });
    imgList_Signature.value = Array.isArray(signatureImages) ? signatureImages : [];
    console.log('data_Signature', data_Signature.value);
    console.log('imgList_Signature', imgList_Signature.value);
  } catch (error) {
    console.error('加载数据失败:', error);
  }
}

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.condition-display {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  width: 100%;
  height: 100%;
  gap: 20px;
}

.record-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  min-width: 0;
}

.title {
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.describe {
  padding-left: 24px;
  font-size: 13px;
  color: grey;
  word-wrap: break-word;
}

.image-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.content img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  box-sizing: border-box;
}

.PhotoCapture {
  /* border: 1px solid red; */
}

.Signature {
  /* border: 1px solid blue; */
}

.Signature, .PhotoCapture {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  min-width: 0;
}

.no-image {
  color: #999;
  font-style: italic;
  padding: 10px;
}
</style>
